<template>
  <el-drawer
      v-model="drawer"
      size="700px"
      :with-header="false"
      @closed="saveConfig"
  >
    <el-tabs class="tabs" v-model="showTab">
      <el-tab-pane name="form" label="条件设置">
        <div class="title">
          <b>节点名称</b>
        </div>
        <el-input v-model="name" class="node-name" placeholder="输入节点的名称..." clearable />
        <br/>
        <div class="title top30" style="margin-bottom: 15px">
          <b>同时满足以下条件</b>
          <span>所有表单中值或者条件不为空，都会作为必须满足的条件</span>
        </div>
        <FormCondition ref="fConfig" :config="config"/>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script>
import FormCondition from './FormCondition'
import {updateElementName} from "@/utils/UpdateElementUtil";

export default {
  name: "ConditionConfig",
  components:{FormCondition},
  props:{
    ok:{
      type:Function,
      default:null
    },
    config:{
      type: Object,
      default: {}
    },
    id:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showTab:'form',
      name:'',
      drawer:false
    }
  },
  watch:{
    id:function (newVal,oldVal){
      if(newVal){
        if(this.drawer){
          this.initPanel()
        }
      }
    }
  },
  methods: {
    saveConfig(){
      if(!this.id||this.id==''){
        return
      }
      updateElementName(this.bpmnModeler,this.element,this.businessObject,this.name)
      this.$refs.fConfig.saveForm()
      let canvas = this.bpmnModeler.get("canvas");
      if(canvas){
        canvas.resized()
      }
    },
    // 显示并初始化值
    show(bpmnModeler,businessObject,element){
      this.bpmnModeler = bpmnModeler
      this.element = element
      this.businessObject = businessObject;
      this.drawer = true
    },
    // 开始初始化面板
    initPanel(){
      this.name = this.businessObject.get('name')
      if(this.drawer){
        this.$nextTick(()=>{
          this.$refs.fConfig.initForm(this.id)
        })
      }
    }
  }
}
</script>

<style scoped>
.top30 {
  margin-top: 30px;
}
.tabs{
  text-align: left;
}
#tab-base {
  font-size: 20px;
}
.pane{
  text-align: left;
}
.title{
  width: 100%;
}
.title b{
  font-size:14px;
  font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-weight:700;
  color: #000;
  display: block;
  margin: 8px 0px;
}
.title span{
  font-size:13px;
  font-family:'微软雅黑', sans-serif;
  font-weight:400;
  color:#999999;
  display: block;
}
.node-name {
  font-size: 14px;
}
</style>
